<template>
  <div id="app">
   <el-container style="height: 100vh">
    <el-aside style="width: 200px">
      <el-menu router :default-active="defaultPath" active-text-color="#409EFF">
        <el-menu-item index="/selection-single">selection列模拟单选</el-menu-item>
        <el-menu-item index="/selection-highlight">多选行高亮</el-menu-item>
        <el-menu-item index="/selection-same-unique">值相同行只能选中一个</el-menu-item>
        <el-menu-item index="/selection-shiftkey">按住shift实现连选</el-menu-item>
      </el-menu>
    </el-aside>
    
    <el-container>
      <el-header style="height: 56px;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">el-table多选问题</el-breadcrumb-item>
          <el-breadcrumb-item>{{ compName }}</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main style="display:flex;">
        <router-view />
      </el-main>
    </el-container>
   </el-container>
  </div>
</template>

<script>
import routes from '@/router/routes.js'
export default {
  name: "App",
  data() {
    return {
      compName: '',
      defaultPath: '/',
    }
  },
  watch: {
    '$route.path': {
      immidiate: true,
      handler(newVal) {
        this.defaultPath = this.$route.path
        const resolved = routes.find(item => item.path === this.$route.path)?.component
        if (resolved) {
          // 注意: route.component().then(res => {}) 
          // then方法参数是一个模块module, 组件在module.default上
          resolved().then(module => {
            this.compName = module?.default?.name
          })
        }
      },
    }
  },
};
</script>

<style>
body {
  padding: 0;
  margin: 0;
}
.el-header {
  background: #ffffff;
}
.el-header .el-breadcrumb {
  line-height: 56px;
}
.el-aside {
  background-color: #ffffff;
  color: #333;
  line-height: 200px;
}
.el-main {
  background-color: #f3f5f7;
  color: #333;
}
.el-menu-item.is-active {
  background-color: #f3f5f7;
}
</style>
